<template>
  <!--<div class="gtco-loader"></div>
  <div>-->
    <div class="page-inner">
      <header id="gtco-header" class="gtco-cover" role="banner" style="height: 924px;">
        <div class="overlay"></div>
        <div class="gtco-container">
          <div class="row">
            <div class="col-md-12 col-md-offset-0 text-left">
              <div class="row row-mt-15em">
                <div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
                  <span class="intro-text-small">Welcome to Splash</span>
                  <h1>Build website using this template.</h1>
                </div>
                <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                  <div class="form-wrap">
                    <div class="tab">
                      <ul class="tab-menu">
                        <li   class=" gtco-first" :class="[{'active':showSign}]"><a href="#" data-tab="signup" @click="showRegInfo('sign')">Sign up</a></li>
                        <li   class="gtco-second" :class="[{'active':showLogin}]"><a href="#" data-tab="login" @click="showRegInfo('login')">Login</a></li>
                      </ul>
                      <div class="tab-content">
                        <div :class="[{'active':showSign}]" class="tab-content-inner active" data-content="signup" v-show="showSign">
                            <div class="row form-group">
                              <div class="col-md-12">
                                <label for="regUsername">Username or Email</label>
                                <input type="text" class="form-control"  id="regUsername" v-model="regUsername">
                              </div>
                            </div>
                            <div class="row form-group">
                              <div class="col-md-12">
                                <label for="regPassword">Password</label>
                                <input type="password" class="form-control"  id="regPassword" v-model="regPassword">
                              </div>
                            </div>
                            <div class="row form-group">
                              <div class="col-md-12">
                                <label for="regRepPassword">Repeat Password</label>
                                <input type="password" class="form-control"  id="regRepPassword" v-model="regRepPassword">
                              </div>
                            </div>
                            <div class="row form-group">
                              <div class="col-md-12">
                                <input type="submit" class="btn btn-primary" value="Sign up">
                              </div>
                            </div>
                        </div>

                        <div class="tab-content-inner" :class="[{'active':showLogin}]" data-content="login" v-show="showLogin">
                            <div class="row form-group">
                              <div class="col-md-12">
                                <label for="username">Username or Email</label>
                                <input type="text" class="form-control"  id="username" v-model="username">
                              </div>
                            </div>
                            <div class="row form-group">
                              <div class="col-md-12">
                                <label for="password">Password</label>
                                <input type="password" class="form-control"  id="password" v-model="password">
                              </div>
                            </div>

                            <div class="row form-group">
                              <div class="col-md-12">
                                <input type="submit" class="btn btn-primary" value="Login" @click="login">
                              </div>
                            </div>

                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    </div>
</template>

<script>
  //import api from '@/API'
  export default {
        name: "Login",
        data(){
        return{
          regUsername:'',
          regPassword:'',
          regRepPassword:'',
          username: '',
          password: '',
          showSign:true,
          showLogin:false,
          token:''
          }
        },
      mounted(){
        // TODO: 登录页面 动画效果
        //装载点击切换效果

      },
      methods:{
          login:function () {
            let _this=this;
            let postData = this.$qs.stringify({
              username:_this.username,
              password:_this.password
            });
            _this.$ajax.post(
              '/api/user/login',
              postData
            ).then(function (data) {
                if(data.data.code==200){
                    //拿到token
                    let expireDays = 1000 * 60 * 60 ;
                    //设置跟axios拦截器挂上关系

                    _this.$cookie.set('token',data.data.object.token,expireDays); //设置Session
                    _this.$cookie.set('username',data.data.object.username,expireDays); //设置用户编号

                    //路径跳转
                    _this.$router.push('/home');
                }
            })
          },
        showRegInfo:function (object) {
              if (object=="sign"){
                this.showLogin=false;
                this.showSign=true;
              }else{
                this.showLogin=true;
                this.showSign=false;
              }
          }

      }
    }
</script>

<style scoped>
  @import "css/bootstrap.css";
  @import "css/style.css";
</style>
